<template>
    <div class="addFin">
        <el-card>
            <el-button type="info" size="small" icon="el-icon-arrow-left"
                @click="backToPrev">
                返回</el-button>
            <el-form size="small" class="addForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">类型</span>
                            </span>
                            <div class="choose">
                                <el-select v-model="addForm.type"
                                    placeholder="请选择类型">
                                    <el-option label="收入" value="0"></el-option>
                                    <el-option label="支出" value="1"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">标题</span>
                            </span>
                            <el-input v-model="addForm.head"></el-input>
                        </el-form-item>
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">部门</span>
                            </span>
                            <div class="choose">
                            <el-select placeholder="请选择部门" v-model="addForm.deptId">
                                <el-option v-for="item in departments"
                                    :label="item.depName" :value="item.depId"
                                    :key="item.depId"></el-option>
                            </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">经手时间</span>
                            </span>
                            <div class="dateChoose">
                            <el-date-picker v-model="addForm.handleTime"
                                align="right" type="datetime" placeholder="选择日期"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                            </div>
                        </el-form-item>
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">描述</span>
                            </span>
                            <el-input type="textarea"
                                v-model="addForm.description"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">选择状态</span>
                            </span>
                            <div class="choose">
                                <el-select v-model="addForm.status"
                                    placeholder="请选择状态">
                                    <el-option label="有效" value="0"></el-option>
                                    <el-option label="待定" value="1"></el-option>
                                    <el-option label="无效" value="2"></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">金额</span>
                            </span>
                            <el-input v-model="addForm.amount"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">账户</span>
                            </span>
                            <div class="choose">
                            <el-select placeholder="请选择账户" v-model="addForm.account">
                                <el-option v-for="item in accounts"
                                    :label="item.account" :value="item.id"
                                    :key="item.id"></el-option>
                            </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">经手人</span>
                            </span>
                            <el-input v-model="addForm.handler"></el-input>
                        </el-form-item>
                        <el-form-item required>
                            <span slot="label">
                                <span class="labelText">备注</span>
                            </span>
                            <el-input type="textarea"
                                v-model="addForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="subBtn">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>

        </el-card>

    </div>
</template>
  
<script>
import dayjs from 'dayjs';
export default {
    name: '',
    data() {
        return {
            addForm: {
                "account": '',
                "amount": '',
                "annex": "",
                "createTime": "",
                "depName": "",
                "deptId": '',
                "description": "",
                "handleTime": "",
                "handler": "",
                "head": "",
                "id": 0,
                "isDeleted": 0,
                "remark": "",
                "status": '',
                "type": '',
                "updateTime": ""
            },
            drugPaList: [],
            departments: [],
            accounts:[]
        }
    },
    components: {

    },
    created(){
        this.getDepInfo()
        this.$axios({
          method:'get',
          url:'/FinancialManagement/Account/findAccountList',
          params:{
              "currentPage":1,//当前页数默认第一页
              "pageSize":100,//每页显示记录数
          }
      })
      .then(resp=>{
          console.log(resp.data.data.list);
          this.accounts=resp.data.data.list;
          console.log(this.accounts);
      })
    },
    methods: {
        dayjs,

        backToPrev() {
            this.$router.push('/financial/finManage')
        },
        cancel() {
            this.addForm = {
                "account": 0,
                "amount": 0,
                "annex": "string",
                "createTime": "string",
                "depName": "string",
                "deptId": 0,
                "description": "string",
                "handleTime": "2023-02-27T09:48:25.387Z",
                "handler": "string",
                "head": "string",
                "id": 0,
                "isDeleted": 0,
                "remark": "string",
                "status": 0,
                "type": 0,
                "updateTime": "string"
            }
        },
        async onSubmit() {
            this.addForm.createTime = new Date(dayjs().format("YYYY-MM-DD HH:mm:ss"));
            console.log(this.addForm);
            let res = await this.$axios({
                method: 'post',
                url: '/FinancialManagement/Financial/addFinancial',
                data: this.addForm
            });
            console.log(res);
            if (res.data.code === 200) {
                //跳转到列表页面
                this.$router.push('/financial/finManage')
                //提示
                this.$message({
                    message: '恭喜你，添加账户成功',
                    type: 'success'
                });
            } else {
                //错误信息提示
                this.$message.error('出现错误，添加账户失败');
            }
        },
        //部门数据
        //-------转交获取部门数据
        getDepInfo() {
            this.$api.supply.getDepList().then(resp => {
                console.log(resp);
                this.departments = resp.data.data
            })
        },   
        pickerOptions(){
        console.log(11);
    }
    },
 
}
</script>

<style scoped>
.addFin {
    margin: 20px 5px 0;
}

.labelText {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

hr {
    height: 0px;
    border: 1px solid #6c7b8b;
}

.subBtn {
    text-align: center;
}

/* element样式修改 */
.choose>>>.el-select {
    display: block;
}

.dateChoose>>>.el-date-editor {
    display: block;
    width: 100%;
}

.dateChoose>>>.el-input__prefix {
    top: 17px;
}

.choose>>>.el-select .el-input__suffix {
    top: 15px;
}
</style>